<template>
	<view>
		<view class="num">
			<text class="title">截止当前全国疫情的数据统计</text>
			<view>
				<u-grid :border="true">
					<u-grid-item>
						<text class="grid-text">较昨日+{{ chinaAdd.localConfirmH5 }}</text>
						<text class="grid-num" style="color:#b42d1f">{{ chinaTotal.localConfirm }}</text>
						<text class="grid-current">本土现有确诊</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-text">较昨日+{{ chinaAdd.nowConfirm }}</text>
						<text class="grid-num" style="color:#27b3d5">{{ chinaTotal.nowConfirm }}</text>
						<text class="grid-current">现有确诊</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-text">较昨日+{{ chinaAdd.confirm }}</text>
						<text class="grid-num" style="color: #f6ab55;">{{ chinaTotal.confirm }}</text>
						<text class="grid-current">累计确诊</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-text">较昨日+{{ chinaAdd.noInfect }}</text>
						<text class="grid-num" style="color: #2d5625;">{{ chinaTotal.noInfect }}</text>
						<text class="grid-current">无症状感染者</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-text">较昨日+{{ chinaAdd.importedCase }}</text>
						<text class="grid-num" style="color: #902a2e;">{{ chinaTotal.importedCase }}</text>
						<text class="grid-current">境外输入</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-text">较昨日+{{ chinaAdd.dead }}</text>
						<text class="grid-num" style="color: #1441a7;">{{ chinaTotal.dead }}</text>
						<text class="grid-current">累计死亡</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="tabMap">
			<view @click="currentComfirm"><view :class="flag == 1 ? 'active' : ''">当前确诊</view></view>
			<view @click="sumComfirm"><view :class="flag == 2 ? 'active' : ''">总疫情</view></view>
		</view>
		<view id="china"><my-echarts id="mychart-dom-bar" canvas-id="mychart-bar" :echarts="echarts" :onInit="initChart"></my-echarts></view>
		<!-- 表格 -->
		<view class="table-box">
			<uni-table stripe emptyText="暂无更多数据" border>
				<uni-tr>
					<uni-th align="center">地区</uni-th>
					<uni-th align="center">新增确诊</uni-th>
					<uni-th align="center">累计确诊</uni-th>
					<uni-th align="center">治愈</uni-th>
					<uni-th align="center">死亡</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableList" :key="index">
					<uni-td>{{ item.name }}</uni-td>
					<uni-td>{{ item.today.confirm }}</uni-td>
					<uni-td>{{ item.total.confirm }}</uni-td>
					<uni-td>{{ item.total.heal }}</uni-td>
					<uni-td>{{ item.total.dead }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
// import * as echarts from './component/src/echarts.main.js';
import '../../static/china.js';
import * as echarts from 'echarts';
import myEcharts from './component/src/echarts.vue';
let chart = null;
export default {
	data() {
		return {
			chinaAdd: {},
			chinaTotal: {},
			// 地图显示的数据
			mapList: [],
			//总数据
			sumMapList: [],
			// 表格数据
			tableList: [],
			echarts,
			// 地图切换标识
			flag: 1
		};
	},
	components: { myEcharts },
	methods: {
		// 绘制canvas
		initChart(canvas, width, height) {
			chart = echarts.init(canvas, null, {
				width: width,
				height: height
			});
			canvas.setChart(chart);
			return chart;
		},
		// 拿数据投射地图
		goMap() {
			chart.on('click', e => {
				this.tableList = e.data.children;
			}),
				chart.setOption({
					tooltip: {
						//悬浮弹框
						triggerOn: 'click', //提示框触发的条件
						enterable: true, //鼠标是否可进入提示框浮层中，默认为false
						formatter(item) {
							// this.tableList = item.children
							//item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d
							return '省份：' + item.name + '，确诊：' + item.value;
						}
					},
					visualMap: [
						{
							//映射高亮颜色
							orient: 'horizontal', //水平的
							type: 'piecewise', //离散
							bottom: 0,
							textGap: 4,
							itemGap: 4,
							itemWidth: 10,
							itemHeight: 10,
							padding: 2,
							textStyle: {
								fontSize: 9
							},
							pieces: [
								// 配置颜色区间
								{
									min: 0,
									max: 0,
									color: '#FFFFFF'
								},
								{
									min: 1,
									max: 9,
									color: '#FAEBD2'
								},
								{
									min: 10,
									max: 99,
									color: '#E9A188'
								},
								{
									min: 100,
									max: 499,
									color: '#D56355'
								},
								{
									min: 500,
									max: 999,
									color: '#BB3937'
								},
								{
									min: 1000,
									max: 10000,
									color: '#772526'
								},
								{
									min: 10000,
									color: '#480F10'
								}
							]
						}
					],
					series: [
						{
							name: '省',
							type: 'map', //地图  bar  line  map
							map: 'china', //中国地图 需要引入地图china.js
							roam: false,
							zoom: 1.2,
							aspectScale: 0.75,
							top: 40,
							layoutCenter: ['5%', '5%'],
							label: {
								normal: {
									show: true,
									textStyle: {
										fontSize: 8
									}
								}
							},
							itemStyle: {
								normal: {
									areaColor: 'rgba(0,255,236,0)',
									borderColor: 'rgba(0,0,0,0.2)'
								},
								emphasis: {
									// 选中的区域颜色及阴影效果等
									areaColor: 'rgba(255,180,0,0.8)',
									shadowOffsetX: 0,
									shadowOffsetY: 0,
									shadowBlur: 20,
									borderWidth: 0
								}
							},
							data: this.mapList
						}
					]
				});
		},
		// 获取确诊数据
		getmapData() {
			uni.request({
				url: 'http://localhost:3000/index/list',
				method: 'GET',
				success: res => {
					this.chinaAdd = res.data.diseaseh5Shelf.chinaAdd;
					this.chinaTotal = res.data.diseaseh5Shelf.chinaTotal;
					this.sumMapList = res.data.diseaseh5Shelf.areaTree[0].children;
					this.mapList = this.sumMapList.map(item => {
						return { name: item.name, value: item.today.confirm, children: item.children };
					});
					this.tableList = this.mapList[3].children;
					this.goMap();
				}
			});
		},
		// 总疫情展示
		sumComfirm() {
			this.flag = 2;
			this.mapList = this.sumMapList.map(item => {
				return { name: item.name, value: item.total.nowConfirm, children: item.children };
			});
			this.goMap();
		},
		// 当前疫情显示
		currentComfirm() {
			this.flag = 1;
			this.mapList = this.sumMapList.map(item => {
				return { name: item.name, value: item.today.confirm, children: item.children };
			});
			this.goMap();
		}
	},
	mounted() {
		this.getmapData();
	}
};
</script>
<style lang="less">
page {
	background-color: #fafafa;
}
.tabMap {
	margin-top: 10rpx;
	background-color: #ffffff;
	display: flex;
	padding: 10rpx 0;
	border-radius: 20rpx 0;
	view {
		width: 50%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		view {
			border-radius: 20rpx;
		}
	}
	:nth-child(2) {
		border-left: 2rpx solid #635d6e;
	}
}

#china {
	width: 100%;
	height: 630rpx;
	background-color: #e4e4e4;
}
.echarts-wrap {
	width: 100%;
	height: 630rpx;
}

.num {
	background-color: #ffffff;
	border-radius: 20rpx;
	.title {
		margin-left: 16rpx;
		border-left: 8rpx solid #5768ff;
		padding-left: 16rpx;
	}
	.u-grid-item {
		padding: 20rpx !important;
	}
	.grid-text {
		font-size: 28rpx;
		color: #635d6e;
	}
	.grid-num {
		font-size: 30rpx;
		margin: 10rpx 0;
		font-weight: bold;
	}
	.grid-current {
		font-weight: bold;
		font-size: 30rpx;
	}
}
.active {
	background-color: #e0eaff;
	color: #4459ba;
}
.uni-table .uni-table-tr:nth-child(odd) {
	background-color: #e4e4e4 !important;
}
.uni-table .uni-table-tr:nth-child(1) {
	background-color: #ffffff !important;
}
</style>
